<template>
  <common-card class="student-knowledge-point">
    <template #title
      >知识点分析
      <span ref="tooltipRef" class="tooltip-wrapper">
        <a-tooltip placement="bottom" :getPopupContainer="() => tooltipRef">
          <template #title>
            <div class="overlay-content">
              <span>薄弱知识点（标红显示）：正确率低于60%的知识点；</span>
            </div>
          </template>
          <label class="explain-icon"></label>
        </a-tooltip> </span
    ></template>
    <!-- <template #operate
      ><span class="operate" @click="goWrongBook"
        ><span class="operate__desc">巩固错题</span
        ><label class="operate__icon"></label></span
    ></template> -->
    <div>
      <a-table
        :columns="STUDENT_KNOWLEDGE_POINT"
        :showSorterTooltip="false"
        :dataSource="dataList"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'knowledge_name'">
            <span
              :style="{ color: record.right_rate < 0.6 ? '#FF7B73' : '' }"
              >{{ record.knowledge_name }}</span
            ></template
          >
          <template v-if="column.dataIndex === 'right_rate'">
            {{ getPercent(record.right_rate) }}%</template
          >
          <template v-if="column.dataIndex === 'class_right_rate'">
            {{ getPercent(record.class_right_rate) }}%</template
          >
        </template></a-table
      >
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { STUDENT_KNOWLEDGE_POINT } from '../constant'
import { getStudentKnowledge } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent } from '../utils'
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const situationReport = useSituationReport()
const tooltipRef = ref(null)
const props = defineProps({
  studentId: {
    default: '',
    type: String
  }
})
const dataList = ref([])

const getList = async () => {
  const params = {
    ...situationReport.search,
    student_id: props.studentId
  }
  const { data } = await getStudentKnowledge(params)
  dataList.value = data?.list || []
}

watchEffect(async () => {
  if (situationReport.search && props.studentId) {
    getList()
  }
})

const goWrongBook = () => {
  router.push({
    path: '/wrongBook',
    query: {
      source: 'situationReport',
      resourceType: '5',
      resourceTab: '1'
    }
  })
}
</script>
<style lang="less" scoped>
@import '../style.less';

.student-knowledge-point {
  .operate {
    &__icon {
      margin-left: 4px;
      background: url('@/assets/images/situation-report/right-arrow.png')
        no-repeat center/cover;
    }
  }
}
</style>
